<template>
<div>
   <div class="title">{{ activeIndex==='1'? '销售排行':'访问排行' }}</div>
   <div class="main">
    <div class="item" v-for="(o,index) in orderRank" :key="index">
      <div class="no" :class="{ active: index<3 }">{{o.no}}</div>
      <div class="name">{{o.name}}</div>
      <div class="count">{{o.count}}</div>
    </div>
   </div>
</div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'RightView',
  })
</script>

<script lang="ts" setup>
import { useEchartsStore } from '@/stores/echarts'
import { computed } from 'vue';
const echartsStore = useEchartsStore()
// "orderRank": [
//     {
//     "no": 1,
//     "name": "肯德基",
//     "count": "323,234"
// }]
const orderRank = computed(()=>{
  return echartsStore.echartsData.orderRank
})

const userRank = computed(()=>{
  return echartsStore.echartsData.userRank
})

const props = defineProps<{
  activeIndex:string
}>()
</script>

<style lang="scss" scoped>
.title{
  font-size:14px;
  margin-top:50px;
  margin-bottom: 5px;
}
.item{
  display:flex;
  align-items: center;
  font-size:12px;
  margin-bottom:5px;
}
.no{
  width:20px;
  height:20px;
  line-height: 20px;
  text-align:center;
  // 动态渲染
  &.active{
    background: #000;
    color:#fff;
    border-radius: 50%;
  }
}
.name{
  flex-grow:1;
  margin:0 10px
}
</style>